<template>
  <div class="cost-record-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>成本记录管理</h2>
    </div>

    <!-- 成本分析图表区域 -->
    <div class="chart-section">
      <div class="section-header">
        <h3>成本分析</h3>
      </div>
      <div class="chart-grid">
        <!-- 图表1：按部门成本分布 -->
        <div class="chart-item">
          <div class="chart-title">部门成本分布</div>
          <div id="departmentChart" class="chart-container"></div>
        </div>
        <!-- 图表2：按成本项目分布 -->
        <div class="chart-item">
          <div class="chart-title">成本项目分布</div>
          <div id="costItemChart" class="chart-container"></div>
        </div>
      </div>
    </div>

    <!-- 工具栏区域 -->
    <div class="toolbar">
      <!-- 左侧筛选条件 -->
      <div class="filter-group">
        <el-select v-model="searchForm.departmentId" placeholder="选择部门" class="filter-item">
          <el-option label="全部" value="" />
          <el-option 
            v-for="dept in departmentOptions" 
            :key="dept.id" 
            :label="dept.deptName" 
            :value="dept.id"
          />
        </el-select>
        
        <el-select v-model="searchForm.costItemId" placeholder="选择成本项目" class="filter-item">
          <el-option label="全部" value="" />
          <el-option 
            v-for="item in costItemOptions" 
            :key="item.id" 
            :label="item.itemName" 
            :value="item.id"
          />
        </el-select>

        <el-select v-model="searchForm.applicantId" placeholder="选择申请人" class="filter-item">
          <el-option label="全部" value="" />
          <el-option 
            v-for="user in userOptions" 
            :key="user.id" 
            :label="user.realName" 
            :value="user.id"
          />
        </el-select>

        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="filter-item"
        />
      </div>

      <!-- 右侧操作按钮 -->
      <div class="action-group">
        <el-input
            v-model="searchForm.keyword"
            placeholder="搜索记录编号/描述"
            class="search-input"
            prefix-icon="el-icon-search"
            @keyup.enter="handleSearch"
          />
        <el-button type="primary" @click="handleSearch" class="search-btn">搜索</el-button>
        <el-button @click="handleReset" class="reset-btn">重置</el-button>
        <el-button type="success" @click="handleAdd" class="add-btn">新增</el-button>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-table
        v-loading="pagination.loading"
        :data="costRecordsList"
        style="width: 100%"
        border
        stripe
        fit
        empty-text="暂无数据"
      >
        <el-table-column prop="recordNo" label="记录编号" width="160" />
        <el-table-column prop="departmentName" label="发生部门" width="120" />
        <el-table-column prop="costItemName" label="成本项目" width="150" />
        <el-table-column prop="applicantName" label="申请人" width="100" />
        <el-table-column prop="amount" label="成本金额" width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.amount) }}
          </template>
        </el-table-column>
        <el-table-column prop="occurrenceDate" label="发生日期" width="120" />
        <el-table-column prop="costType" label="成本性质" width="100">
          <template #default="scope">
            <el-tag :type="getCostTypeTag(scope.row.costType).type">
              {{ getCostTypeTag(scope.row.costType).label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="支付状态" width="100">
          <template #default="scope">
            <el-tag :type="getPaymentStatusTag(scope.row.paymentStatus).type">
              {{ getPaymentStatusTag(scope.row.paymentStatus).label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="审批状态" width="100">
          <template #default="scope">
            <el-tag :type="getApprovalStatusTag(scope.row.approvalStatus).type">
              {{ getApprovalStatusTag(scope.row.approvalStatus).label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="成本描述" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <!-- 审批按钮：只对未审批的记录显示 -->
            <el-button 
              v-if="scope.row.approvalStatus === 1" 
              size="small" 
              type="success" 
              @click="handleApprove(scope.row)"
            >
              审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      />
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="600px"
      append-to-body
    >
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formRef"
        label-width="100px"
      >
        <el-form-item label="部门" prop="departmentId">
          <el-select v-model="formData.departmentId" placeholder="请选择部门" style="width: 100%">
            <el-option 
              v-for="dept in departmentOptions" 
              :key="dept.id" 
              :label="dept.deptName" 
              :value="dept.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="成本项目" prop="costItemId">
          <el-select v-model="formData.costItemId" placeholder="请选择成本项目" style="width: 100%">
            <el-option 
              v-for="item in costItemOptions" 
              :key="item.id" 
              :label="item.itemName" 
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="成本金额" prop="amount">
          <el-input v-model.number="formData.amount" placeholder="请输入成本金额" />
        </el-form-item>
        <el-form-item label="发生日期" prop="occurrenceDate">
          <el-date-picker
            v-model="formData.occurrenceDate"
            type="date"
            placeholder="选择发生日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="记录日期" prop="recordDate">
          <el-date-picker
            v-model="formData.recordDate"
            type="date"
            placeholder="选择记录日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="成本性质" prop="costType">
          <el-select v-model="formData.costType" placeholder="请选择成本性质" style="width: 100%">
            <el-option label="实际成本" value="1" />
            <el-option label="预算成本" value="2" />
            <el-option label="预估成本" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态" prop="paymentStatus">
          <el-select v-model="formData.paymentStatus" placeholder="请选择支付状态" style="width: 100%">
            <el-option label="未支付" value="1" />
            <el-option label="已支付" value="2" />
            <el-option label="已报销" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="成本描述" prop="description">
          <el-input v-model="formData.description" placeholder="请输入成本描述" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 审批对话框 -->
    <el-dialog
      title="审批成本记录"
      v-model="approveDialogVisible"
      width="600px"
      append-to-body
    >
      <el-form
        :model="approveForm"
        :rules="approveFormRules"
        ref="approveFormRef"
        label-width="100px"
      >
        <el-form-item label="审批记录" class="info-item">
          <div class="approval-info">
            <p><strong>记录编号：</strong>{{ approveForm.recordNo }}</p>
            <p><strong>部门：</strong>{{ approveForm.departmentName }}</p>
            <p><strong>申请人：</strong>{{ approveForm.applicantName }}</p>
            <p><strong>成本金额：</strong>{{ formatCurrency(approveForm.amount) }}</p>
            <p><strong>成本描述：</strong>{{ approveForm.description }}</p>
          </div>
        </el-form-item>
        <el-form-item label="审批状态" prop="approvalStatus">
          <el-select v-model="approveForm.approvalStatus" placeholder="请选择审批状态" style="width: 100%">
            <el-option label="批准" value="2" />
            <el-option label="拒绝" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批意见" prop="approvalComment">
          <el-input 
            v-model="approveForm.approvalComment" 
            placeholder="请输入审批意见" 
            type="textarea" 
            :rows="4" 
          />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="approveDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleApproveSubmit">提交审批</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useCostRecord } from '@/hooks/useCostRecord';
import { useCostChart } from '@/hooks/useCostChart';

// 使用hooks - 在script setup中直接解构，无需return
const {
  loading,
  dialogVisible,
  dialogTitle,
  formRef,
  searchForm,
  pagination,
  formData,
  formRules,
  departmentOptions,
  costItemOptions,
  userOptions,
  costRecordsList,
  approveDialogVisible,
  approveForm,
  approveFormRef,
  approveFormRules,
  getCostRecords,
  formatCurrency,
  getCostTypeTag,
  getPaymentStatusTag,
  getApprovalStatusTag,
  handleSearch,
  handleReset,
  quickFilter,
  handleAdd,
  handleView,
  handleEdit,
  handleSubmit,
  handleDialogClose,
  handleSizeChange,
  handleCurrentChange,
  jumpToPage,
  handleApprove,
  handleApproveSubmit
} = useCostRecord();

const { renderCharts } = useCostChart();

// 组件挂载时获取数据和渲染图表
onMounted(() => {
  getCostRecords();
  renderCharts();
});
</script>

<style scoped>
.cost-record-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.chart-section {
  background: #ffffff;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-item {
  background: #fafafa;
  border-radius: 6px;
  padding: 15px;
}

.chart-title {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 10px;
  text-align: center;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.toolbar {
  background: #ffffff;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-group {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.filter-item {
  width: 200px;
}

.action-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-input {
  width: 300px;
}

.table-section {
  background: #ffffff;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-item {
    width: 100%;
  }
  
  .search-input {
    width: 100%;
  }
  
  .action-group {
    flex-direction: column;
    align-items: stretch;
  }
}

.info-item {
  margin-bottom: 20px;
}

.approval-info {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.approval-info p {
  margin: 8px 0;
  font-size: 14px;
  color: #606266;
}
</style>